<template>
  <a-card style="height: 100%;">
    <!-- 查询条件 -->
    <a-row>
      <a-col :span="6">公告标题：<a-input v-model:value="queryParam.title" style="width:12vw;" placeholder="公告标题" /></a-col>
      <a-col :span="6">公告内容：<a-input v-model:value="queryParam.contentText" style="width:12vw;"
          placeholder="公告内容" /></a-col>
      <a-col :span="8">发布时间：<a-range-picker v-model:value="issueRangeDate" show-time style="width:20vw;" /></a-col>
      <a-col :span="4"><a-button type="primary" @click="loadPageList">查询</a-button> <a-button
          @click="resetQueryParam">重置</a-button></a-col>
    </a-row>
    <a-row style="margin-top: 10px;">
      <a-col :span="24">
        <a-button v-if="permission.findIndex(p => p === 'operate:add') >= 0" type="primary"
          @click="openAddModal">新增</a-button>
      </a-col>
    </a-row>
    <!-- 列表 -->
    <div class="list-container">
      <a-empty v-if="tableData.length == 0" />
      <a-card class="list-item-card" v-for="(item, index) in tableData" :key="index">
        <template #title>
          <div class="list-item-card-title">
            <div class="list-item-card-title-item">标题：{{ item.title }}</div>
            <div class="list-item-card-title-item" style="margin-left: 10px;">发布单位：{{ item.issueDepartName }}</div>
            <div class="list-item-card-title-item" style="margin-left: 10px;">发布时间：{{ item.issueTime }}</div>
            <div class="list-item-card-title-item" style="margin-left: 10px;">状态：{{ item.status == '0' ? '草稿' :
              item.status == '1' ? '已发布' : '归档' }}
            </div>
          </div>
        </template>
        <template #extra>
          <a-button type="link" @click="openDetailModal(item.id)"
            v-if="permission.findIndex(p => p === 'operate:view' || p === 'data:status:issue') >= 0">查看</a-button>
          <a-button type="link" @click="openUpdateModal(item.id)"
            v-if="permission.findIndex(p => p === 'operate:edit') >= 0">修改</a-button>
          <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeOne(item.id)"
            v-if="permission.findIndex(p => p === 'operate:delete') >= 0">
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </template>
        <div class="list-item-content">
          {{ item.contentText }}
        </div>
      </a-card>
      <div class="pagination-container">
        <a-pagination :current="paginationInfo.pageNum" :pageSize="paginationInfo.pageSize" :total="paginationInfo.total"
          show-quick-jumper @change="onPageInationChange" />
      </div>
    </div>
    <ProclamationModal ref="proclamationModal" @onCancel="onCancel"></ProclamationModal>
  </a-card>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { toRaw } from '@vue/reactivity';
import type { Dayjs } from 'dayjs';
import { getPageList, remove } from '@/api/workorder/rcbg/proclamation';
type RangeValue = [Dayjs, Dayjs];
import ProclamationModal from './ProclamationModal.vue';
export default {
  components: {
    ProclamationModal,
  },
  setup() {
    let permission: Array<string> = reactive([]);
    const router = useRouter();
    // 列表数据
    let tableData: any = reactive([]);
    // 查询参数
    let queryParam: any = reactive({
      title: '',
      contentText: '',
      issueBeginTime: null,
      issueEndTime: null,
      status: ''
    });
    // 分页
    let paginationInfo: any = reactive({
      pageNum: 1,
      pageSize: 5,
      total: 0,
    });
    let issueRangeDate = ref<RangeValue>();
    const proclamationModal: any = ref(null);
    // 生命周期
    onMounted(() => {
      readRouteParam();
      loadPageList();
    });

    /**
     * 读取路由参数
     */
    function readRouteParam() {
      // 获取地址参数
      const query = router.currentRoute.value.query;
      // 获取路由上的权限
      if (query && query.permission) {
        permission.push(...(query.permission as string).split(","));
        // 数据权限包含状态为已发布
        if (permission.findIndex(p => p === 'data:status:issue') >= 0) {
          queryParam.status = '1';
        }
      }
    }

    /**
     * 加载列表
     */
    async function loadPageList() {
      if (issueRangeDate.value) {
        queryParam.issueBeginTime = issueRangeDate.value[0];
        queryParam.issueEndTime = issueRangeDate.value[1];
      }
      const res = await getPageList(
        paginationInfo.pageNum,
        paginationInfo.pageSize,
        toRaw(queryParam),
      );
      tableData.splice(0, tableData.length);
      tableData.push(...res.records);
      paginationInfo.total = res.total;
    }
    /**
     * 重置查询条件
     */
    function resetQueryParam() {
      queryParam.title = '';
      queryParam.contentText = '';
      queryParam.issueBeginTime = null;
      queryParam.issueEndTime = null;
      if (permission.findIndex(p => p === 'data:status:issue') >= 0) {
        queryParam.status = '1';
      } else {
        queryParam.status = '';
      }
      issueRangeDate.value = undefined;
      loadPageList();
    }

    function onPageInationChange(pageNum: number, pageSize: number) {
      paginationInfo.pageNum = pageNum;
      paginationInfo.pageSize = pageSize;
      loadPageList();
    }
    /**
     * 打开新增窗口
     */
    function openAddModal() {
      // 调用子组件方法
      proclamationModal.value.init();
    }
    /**
     * 打开修改窗口
     */
    function openUpdateModal(id: string) {
      proclamationModal.value.init({ id });
    }
    /**
     * 打开查看窗口
     */
    function openDetailModal(id: string) {
      proclamationModal.value.init({ id, disabled: true });
    }
    /**
     * 窗口关闭回调
     */
    function onCancel() {
      loadPageList();
    }
    /**
     * 删除
     */
    async function removeOne(id: string) {
      const res = await remove(id);
      if (res.code == 200) {
        message.success('删除成功');
        loadPageList();
      } else {
        message.error(res.message ? res.message : '删除失败');
      }
    }

    return {
      permission,
      tableData,
      queryParam,
      paginationInfo,
      issueRangeDate,
      proclamationModal,
      loadPageList,
      resetQueryParam,
      onPageInationChange,
      openAddModal,
      openUpdateModal,
      openDetailModal,
      onCancel,
      removeOne
    };
  },
};
</script>

<style scoped>
.list-container {
  margin-top: 10px;
}

.list-item-card {
  margin-bottom: 10px;
}

.list-item-card-title {
  /* width: 80%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
}

.list-item-card-title-item {
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-content {
  height: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  word-break: break-all;
}

.pagination-container {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 30px;
}
</style>>